<template>
  <ul class="nav">
    <router-link :to="{ name: 'Home' }">
      <li
        :class="current == 'Home' ? 'active' : ''"
        @click="clickHandle('Home')"
      >
        首页
        <i class="fa fa-home"></i>
      </li>
    </router-link>
    <router-link :to="{ name: 'list' }">
      <li
        :class="current == 'List' ? 'active' : ''"
        @click="clickHandle('List')"
      >
        分类 <i class="fa fa-bars"></i>
      </li>
    </router-link>
    <router-link :to="{ name: 'study' }">
      <li
        :class="current == 'Cart' ? 'active' : ''"
        @click="clickHandle('Cart')"
      >
        我的学习 <i class="fa fa-book"></i>
      </li>
    </router-link>
    <router-link :to="{ name: 'user' }">
      <li
        :class="current == 'User' ? 'active' : ''"
        @click="clickHandle('User')"
      >
        账号<i class="fa fa-user"></i>
      </li>
    </router-link>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      current: "Home",
    };
  },
  methods: {
    clickHandle(page) {
      this.current = page;
      this.$emit("changePage", this.current);
    },
  },
  
};
</script>

<style lang="scss" scoped>
.nav {
  background-color: #f8f8f8;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  li {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ccc;
    i {
      font-size: 1.2rem;
    }
  }
  .active {
    color: #444;
  }
  border-top: 2px solid #ccc;
}
</style>
